<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="list">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
    </div>
</body>
<script>
    var liList = document.querySelectorAll(".list li");


    for (var i = 0; i < liList.length; i++) {
        function fn(i) { // i 形式参数  局部变量
            var li = liList[i];
            // 页面加载时  此处只做事件绑定
            li.onclick = function () {  // 当我点击li的时候  页面已经加载完毕
                // li  函数本身没有变量 li,i (  向外跳一层找父作用域 )
                li.style.background = "red";
                console.log(li, i);
            }
        }
        fn(i); // fn(0) .... fn(5)
    }


    // 匿名函数自调用
    // for (var i = 0; i < liList.length; i++) {
    //     // fn(0)
    //     (function (i) { // i 形式参数  局部变量
    //         var li = liList[i];
    //         // 页面加载时  此处只做事件绑定
    //         li.onclick = function () {  // 当我点击li的时候  页面已经加载完毕
    //             // li  函数本身没有变量 li,i (  向外跳一层找父作用域 )
    //             li.style.background = "red";
    //             console.log(li, i);
    //         }
    //     })(i);
    // }



</script>

</html>